<template>
	<div class="user-info-box" 
		:style="{ left: pos.x + 'px', top: pos.y + 'px' }"
		v-click-outside="handleClickOutside">
		<div class="user-info-content">
			<!-- 头像和基本信息 -->
			<div class="user-header">
				<div class="avatar-box">
					<head-image 
						:url="user.headImage" 
						:name="user.nickName"
						:size="80">
					</head-image>
				</div>
			</div>

			<!-- 用户信息 -->
			<div class="user-detail">
				<!-- <div class="info-item">
					<span class="label">用户名:</span>
					<span class="value">{{ user.userName }}</span>
				</div> -->
				<div class="info-item">
					<span class="label">昵称:</span>
					<span class="value">{{ user.nickName }}</span>
				</div>
				<div class="info-item">
					<div class="label">备注：</div>
					<template v-if="!isEditing">
						<div class="value">{{ user.userName || '未设置' }}</div>
						<i class="el-icon-edit edit-icon" @click="startEdit"></i>
					</template>
					<template v-else>
						<el-input 
							v-model="editingRemarkName" 
							size="small"
							ref="remarkInput"
							style="width: 120px"
							@blur="saveRemarkName"
							@keyup.enter.native="saveRemarkName">
						</el-input>
					</template>
				</div>
				<div class="info-item">
					<span class="label">性别:</span>
					<span class="value">{{ user.sex === 0 ? '男' : '女' }}</span>
				</div>
				<div class="info-item">
					<span class="label">签名:</span>
					<span class="value signature">{{ user.signature || '这个人很懒，什么都没写~' }}</span>
				</div>
			</div>

			<!-- 操作按钮 -->
			<div class="action-buttons">
				<el-button 
					type="primary" 
					size="small"
					@click="onSendMessage"
					class="action-btn">
					发消息
				</el-button>
				<el-button 
					type="danger" 
					size="small"
					@click="onDeleteFriend"
					class="action-btn">
					删除好友
				</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import HeadImage from './HeadImage.vue'

	export default {
		name: 'UserInfo',
		components: {
				HeadImage
		},
			props: {
				pos: {
					type: Object,
					required: true
				},
				user: {
					type: Object,
					required: true
				}
			},
			directives: {
				'click-outside': {
					bind(el, binding, vnode) {
						el.clickOutsideEvent = function(event) {
							// 检查是否在编辑状态且点击的是输入框
							if (vnode.context.isEditing && 
								(event.target.classList.contains('el-input__inner') || 
								 event.target.classList.contains('el-icon-edit'))) {
								return;
							}
							// 检查点击事件是否发生在元素外部
							if (!(el == event.target || el.contains(event.target))) {
								// 如果正在编辑，先保存编辑内容
								if (vnode.context.isEditing) {
									vnode.context.saveRemarkName();
								}
								// 调用绑定的方法
								vnode.context[binding.expression](event);
							}
						};
						document.addEventListener('click', el.clickOutsideEvent);
					},
					unbind(el) {
						document.removeEventListener('click', el.clickOutsideEvent);
					}
				}
			},
			data() {
				return {
					remarkName: '',
					isEditing: false,
					editingRemarkName: ''
				}
			},
			onload() {
				console.log(this.user);
			},
			methods: {
				handleClickOutside() {
					this.$store.commit('hideUserInfoBox');
				},
				onSendMessage() {
					this.$store.commit('hideUserInfoBox');
					this.$router.push(`/home/chat`);
					this.$store.dispatch('activeChat', {
						type: 1,
						targetId: this.user.userId,
						showName: this.user.nickName,
						headImage: this.user.headImage
					});
				},
				onDeleteFriend() {
					this.$confirm('确定要删除该好友吗？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$http({
							url: '/friend/delete',
							method: 'delete',
							params: {
								friendId: this.user.userId
							}
						}).then(() => {
							this.$store.commit('hideUserInfoBox');
							this.$message.success('删除成功');
						});
					});
				},
				startEdit() {
					this.editingRemarkName = this.user.remark || '';
					this.isEditing = true;
					this.$nextTick(() => {
						this.$refs.remarkInput.focus();
					});
				},
				saveRemarkName() {
					if (this.editingRemarkName === this.user.remark) {
						this.isEditing = false;
						return;
					}
					
					this.$http({
						url: '/friend/setting',
						method: 'POST',
						data: {
							remark: this.editingRemarkName,
							friendId: this.user.id
						},
						custom: {
							showSuccess: true,
							auth: true
						}
					}).then(() => {
						// 更新本地用户信息
						this.user.remark = this.editingRemarkName;
						// 更新 store 中的好友信息
						this.$store.commit('updateFriend', {
							id: this.user.id,
							remark: this.editingRemarkName
						});
						// 如果在聊天列表中也存在该好友，同步更新聊天列表中的显示名称
						this.$store.commit('updateChatFromFriend', {
							id: this.user.id,
							remarkName: this.editingRemarkName
						});
						this.isEditing = false;
					});
				}
			},
			watch: {
				user: {
					immediate: true,
					handler(newUser) {
						if (newUser) {
							this.remarkName = newUser.remarkName || '';
							this.isEditing = false;
						}
					}
				}
			},
			// 添加 beforeDestroy 钩子，确保组件销毁时清理编辑状态
			beforeDestroy() {
				this.isEditing = false;
			}
		}
	</script>

<style lang="scss" scoped>
	.user-info-box {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 180px;
		padding: 10px;
		background: #fff;
		border-radius: 6px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		z-index: 2000;

		.user-header {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 10px;
			padding-bottom: 8px;
			border-bottom: 1px solid #eee;

			.user-name {
				margin-top: 8px;
				font-size: 16px;
				font-weight: 500;
			}
		}

		.user-detail {
			padding: 0 5px;
			margin-bottom: 10px;

			.info-item {
				margin-bottom: 4px;
				line-height: 1.2;
				font-size: 13px;
				display: flex;
				align-items: center;

				.label {
					color: #666;
					width: 50px;
					flex-shrink: 0;
				}

				.value {
					flex: 1;
					padding-right: 20px;
				}
			}
		}

		.action-buttons {
			display: flex;
			justify-content: center;
			gap: 12px;
			width: 95%;
			margin: 6px auto 0;

			.action-btn {
				flex: 1;
				max-width: 120px;
				padding: 4px 8px;
				font-size: 11px;
				text-align: center;
			}
		}
	}

	.info-item {
		position: relative;
		
		.edit-icon {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			cursor: pointer;
			color: #409EFF;
			font-size: 14px;
		}
	}

	.edit-icon:hover {
		color: #66b1ff;
	}
</style>